import React from 'react'
import './Login.less';
import { Input, NavBar, Button, Divider } from 'antd-mobile';
import github from './images/github.png';
import qq from './images/qq.png';
import wechat from './images/wechat.png';

export default function Login() {
  return (
    <div className="login-container">
        {/* 顶部导航 start */}
        <NavBar back={null}>手机验证码登录</NavBar>
        {/* 顶部导航 end */}

        {/* 表单部分 start */}
        <div className="form">
            <div className="phone">
                <Input  clearable />
            </div>
            <div className="code">
                <Input clearable />
                <Button size='small' color='danger' fill="outline">获取验证码</Button>
            </div>
            <div className="h-20"></div>
            <Button block color='danger' size="large" >登录</Button>
        </div>
        {/* 表单部分 end */}
        <div className="h-20"></div>
        {/* 其他登录方式 start */}
        <div className="other-login">
            <div className="line"><Divider>其他登录方式</Divider></div>
            <div className="h-20"></div>
            <div className="icons">
                <img src={github} alt="" />
                <img src={qq} alt="" />
                <img src={wechat} alt="" />
            </div>
        </div>
        {/* 其他登录方式 end */}

        <div className="h-50"></div>
        <div className="h-20"></div>
        {/* 文字提示 start */}
        <div className="tips">
            未注册的手机号, 验证后会自动创建硅谷账号, 登录即代表您同意《硅谷隐私政策》
        </div>
        {/* 文字提示 end */}
    </div>
  )
}
